<template>
  <div v-if="isShow" class="login_dialog_container">
    <div class="dialog">
      <div class="title_box">
        <div>Forget Password</div>
        <img @click="closeDialog" src="@/assets/common/close.png">
      </div>
      <div class="form_area">
        <div class="form_item">
          <div class="label">E-mail</div>
          <div class="value">
            <input v-model="editPasswordDto.email" placeholder="Enter Your E-mail"/>
          </div>
        </div>
        <div class="form_item">
          <div class="label">Verification Code</div>
          <div class="value">
            <input v-model="editPasswordDto.verifyCode" placeholder="Enter Verification Code"/>
            <div
              @click="toSendCode"
              class="resend-btn"
              :class="{ disabled: countdown > 0 }"
              :disabled="countdown > 0"
            >
              {{ countdown > 0 ? `${countdown}` : 'Resend' }}
            </div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">New Password</div>
          <div class="value">
            <input v-model="editPasswordDto.password" placeholder="Enter Your E-mail"/>
          </div>
        </div>
      </div>
      <button @click="toResetPwd">Submit</button>
    </div>

    <div class="mask"></div>
  </div>
</template>

<script setup>
import {ref, reactive, onBeforeUnmount} from "vue";
import UserAPI from "@/api/user/index.js";
import {ResultEnum} from "@/enums/ResultEnum.js";
import {useLoginCheckStore} from "@/store/index.js"


let loginCheckStore = useLoginCheckStore()

//修改密码传递的参数
const editPasswordDto = ref({
  email: "", //邮箱
  verifyCode: "",//验证码
  password: "", //密码
})

//忘记密码时获取验证码
const countdown = ref(0);
let timer = null;

// 忘记密码时发送验证码
async function toSendCode() {
  if (!editPasswordDto.value.email) {
    return ElMessage.warning("接收验证码的邮箱不能为空")
  }
  if (countdown.value > 0) return;

  try {
    const res = await UserAPI.resetPswSendCode(editPasswordDto.value);
    if (res.code === ResultEnum.SUCCESS) {
      ElMessage.success(`已发送验证码，请前往邮箱查收`);
      // 开始倒计时
      countdown.value = 60;
      timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    }
  } catch (error) {
    ElMessage.error('发送验证码失败');
    console.error(error);
  }
}


// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});


//提交重置密码
async function toResetPwd() {
  const res = await UserAPI.resetPwd(editPasswordDto.value)
  console.log(res, "res是什么")
  if (res.code === ResultEnum.SUCCESS) {
    ElMessage.success("重置密码成功")
    //重置密码成功后重刷页面
    // window.location.reload()
  }
}


const isShow = ref(true)

// 关闭弹窗
function closeDialog() {
  isShow.value = false
  loginCheckStore.setIsLogin(true)
}
</script>

<style lang="scss" scoped>
.login_dialog_container {
  padding: 24px;
  background-color: #fff;
  border-radius: 24px;
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 20;
  padding: 24px;
  border-radius: 24px;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #1C1E24;

  img {
    width: 24px;
    height: 24px;
  }
}

.form_area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 288px;
  margin-top: 24px;

  .form_item {
    margin-top: 16px;
    width: 100%;

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: normal;
      color: #808690;
      margin-bottom: 8px;
    }

    .value {
      background: #F0F2F7;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: normal;
      color: #1C1E24;
      height: 40px;
      border-radius: 8px;

      input {
        width: 100%;
        border: none;
        outline: none;
        background: none;
        box-shadow: none;
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 8px 12px;
        border-radius: 8px;
      }

      /**发送按钮*/
      .resend-btn {
        padding: 0 12px;
        font-size: 16px;
        line-height: 24px;
        color: #1e90ff;
      }

      .resend-btn.disabled {
        cursor: not-allowed;
        color: #c0c4cc;
      }


      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }

      ::v-deep .el-select__wrapper {
        padding: 6px 12px !important;
        box-sizing: border-box;
        border-radius: 8px;
        background: #F0F2F7;
        box-shadow: none;
        font-size: 14px;
        line-height: 20px;
        color: #808690;

        ::v-deep .el-select__selection .el-select__selected-item .el-select__selected-item span {
          color: pink !important;
        }
      }


      .el-select-dropdown-item {
        // 修改当前选中选项的文字显示颜色
        color: pink !important;
      }
    }
  }

  form_item:first-child {
    margin-top: 0;
  }

  .half {
    width: 48%;
  }
}

.text_box {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: right;
  letter-spacing: normal;
  justify-content: center;
  color: #1C1E24;
  margin-top: 24px;
}

.green_text {
  color: #1e90ff;
  margin-left: 8px;
}

button {
  border-radius: 8px;
  background: #1e90ff;
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  color: #FFFFFF;
  width: 100%;
  padding: 8px 16px;
  margin-top: 24px;
}
</style>
